<template>
    <div>
        <addPositionBtn></addPositionBtn>
        <div class="staffPosition">
            <el-row>
                <el-col :span="24" style="min-height: 330px">
                    <el-table :header-cell-style="this.$store.state.headerCssObj" :cell-style="this.$store.state.cellCssObj" :data="currentData" border style="width: 100%">
                        <el-table-column prop="name" label="职位"></el-table-column>
                        <el-table-column prop="remark" label="备注" width="140"></el-table-column>
                        <el-table-column prop="createBy" label="创建人"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                        <el-table-column prop="updateBy" label="更新人"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="editPosition(scope.row)">修改</el-button>
                                <el-button type="danger" size="mini"  @click="delPosition(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="pages">
                        <paging :obj = 'pagingData'></paging>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--编辑职位弹出框-->
        <el-dialog title="编辑职位" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal = 'false'>
            <el-form :rules='editPositionRules' :model="editJobData" ref="editJobData">
                <el-form-item label="职位" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editJobData.name" autocomplete="off" placeholder="请输入职位"></el-input>
                </el-form-item>
                <el-form-item label="备注信息" :label-width="formLabelWidth">
                    <el-input type="textarea" autosize placeholder="请输入备注信息" v-model="editJobData.remark" maxlength="40" show-word-limit style="line-height: 20px;">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toEditJobBtn('editJobData')">提交</el-button>
            </div>
        </el-dialog>
        <!--删除职位弹出框-->
        <deleteDialog :deleteDialogVisible="myDeleteDialogVisible" @handleFun="myDelPosition" @cancel="myDeleteDialogVisible=false"></deleteDialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import addPositionBtn from "../../components/backgroundCom/staffPositionsCom/addPositionBtn";    //新增按钮行
    import deleteDialog from "../../components/publicCom/deleteDialog";    //删除弹框

    export default {
        name: "staffPositionsPage",
        components:{
            addPositionBtn,
            deleteDialog,
        },
        data(){
            //验证职位名称
            let YZ_name = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入职位名称'));
                }else {
                    callback();
                }
            };
            return{
                pageData:[],
                currentPage:1,
                pageNums:10,
                //-------------------------编辑职位部分-------------------------
                dialogFormVisible:false,   //编辑职位弹窗的显示状态
                editPositionRules:{    //编辑职位表单验证规则
                    name:[{validator:YZ_name,trigger:'blur'}],  //验证职位名称
                },
                editJobData:{jobId:'',name:'',remark:''},    //编辑职位信息
                formLabelWidth:'80px',   //编辑职位弹窗label的宽度
                permissionsData:[   //编辑职位弹窗中权限下拉列表
                    {value:'-1',label:'-1'},
                    {value:'0',label:'0'},
                    {value:'1',label:'1'},
                    {value:'2',label:'2'},
                    {value:'3',label:'3'},
                ],
                //-----------------删除职位部分-----------------
                myDeleteDialogVisible:false,     //删除弹出框状态
                delJob:{name:''}
            }
        },
        computed:{
            currentData(){
                let thisData=this.$store.state.staffPositionStore.foundJobData.jobList;   //存的数据
                let thisPageSize=this.$store.state.staffPositionStore.pages.pageSize;  //存的页容量
                let thisPageNum=this.$store.state.staffPositionStore.pages.currentPage;  //存的页码
                thisData.length>thisPageSize ?
                    this.pageData=thisData.slice((thisPageNum-1)*thisPageSize,thisPageNum*thisPageSize) :
                    this.pageData=thisData;
                return this.pageData
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num;   //改变当前页
                        that.$store.state.staffPositionStore.pages.currentPage=num;  //保存当前页
                        that.tablePositionsInfo();  //改变页面数据
                    },
                    pageCount:that.$store.state.staffPositionStore.foundJobData.totalPage,//一共多少页
                };
                return data
            },
        },
        methods:{
            ...mapActions(['userOperation','toDelPosition','toEditJob','showJobInfo','selectPositionByObj']),
            //查询表格数据
            tablePositionsInfo(){
                if (this.$store.state.staffPositionStore.pageState==='showAll'){
                    this.showJobInfo({"pageCount":parseInt(this.$store.state.staffPositionStore.pages.currentPage), "pageSize": parseInt(this.$store.state.staffPositionStore.pages.pageSize)}).then(res=>{
                        if (res.code!==200){
                            console.log(res);
                            this.$message({
                                type: 'error',
                                message: '职位信息加载失败'
                            });
                        }
                    });
                }else if (this.$store.state.staffPositionStore.pageState==='showSelect'){
                    this.selectPositionByObj(this.$store.state.staffPositionStore.thisSelectObj).then(res=>{
                        console.log(res);
                    });
                }
            },
            //用户操作日志
            staffOperation(str){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:str,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //编辑职位
            editPosition(row){
                this.editJobData.jobId=row.jobId;
                this.editJobData.name=row.name;
                this.editJobData.remark=row.remark;
                this.dialogFormVisible=true;
            },
            //点击编辑职位弹窗“提交”按钮
            toEditJobBtn(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){     //表单输入全部验证通过
                        this.editJobData.updateBy=this.$store.state.user.userName;   //更改人
                        this.editJobData.updateTime=new Date(this.$store.state.nowTime.time);   //更改时间
                        this.toEditJob(this.editJobData).then(res=>{
                            if (res.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '修改成功！'
                                });
                                this.staffOperation(`修改职位（${this.editJobData.name}）`); //编辑成功，记录操作日志
                                this.dialogFormVisible=false;  //编辑职位弹窗的显示状态
                                this.tablePositionsInfo();  //刷新表格
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败！'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的职位信息'
                        });
                        return false;
                    }
                });
            },
            //点击删除按钮
            delPosition(row){
                this.myDeleteDialogVisible=true;
                this.delJob.name=row.name;
            },
            //删除权限
            myDelPosition(){
                this.toDelPosition({name:this.delJob.name}).then(res=>{
                    // console.log(res);
                    if (res.code===200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.staffOperation(`删除职位${this.delJob.name}`);   //操作日志
                        if(this.$store.state.staffPositionStore.foundJobData.jobList.length<=1&&this.$store.state.staffPositionStore.pages.currentPage>1){
                            this.$store.state.staffPositionStore.pages.currentPage--;
                            this.currentPage=this.$store.state.staffPositionStore.pages.currentPage;
                        }
                        this.tablePositionsInfo();  //刷新表格
                        this.myDeleteDialogVisible=false;
                    }else {
                        this.$message({
                            type: 'error',
                            message: '当前职位下员工数不为0，无法删除'
                        });
                    }
                });
            }
        },
        created() {
            this.showJobInfo({"pageCount":1, "pageSize": 5}).then(res=>{
                // console.log('页面请求'+res);
                // console.log(this.$store.state.staffInformationStore.foundStaffData);
                if (res.code!==200){
                    // console.log(this.$store.state.staffPositionStore.foundJobData.totalPage)
                    this.$message({
                        type: 'error',
                        message: '职位信息加载失败'
                    });
                }
            })
        }
    }
</script>

<style scoped lang="less">
    .staffPosition{
        margin-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .el-input,.diySelect{
                    margin-left: 10px;
                    width: 80%;
                }
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
            }
            .el-table{
                margin: auto;
            }
        }
        .el-dialog{
            #message{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
            .dialog-footer{
                width: 100%;
            }
            div{
                text-align: center;
                margin: 5px auto;
                span{
                    display: inline-block;
                    text-align: center;
                    width: 20%;
                }
                .el-input{
                    display: inline-block;
                    text-align: center;
                    width: 60%;
                }
            }
        }
    }
</style>